<template>
  <div>
    <div
      v-for="(listTitle, index) in list"
      :key="index"
    >
      <div class="list-title border-bottom">
        <i class="iconfont icon-menpiao"></i>
        {{listTitle.title}}
      </div>
      <div v-if="listTitle.children" class="list-children">
          <DetailList :list="listTitle.children" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailList',
  props: {
    list: Array
  }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
  .border-bottom
    &:before
      border-color #ccc
  .list-title
    height .8rem
    line-height .8rem
    padding-left .4rem
    font-size .32rem
    .iconfont
      color #47C6C6
      padding-right .1rem
  .list-children
    padding 0 .2rem
</style>
